<template>
  <el-card class="report-card" shadow="hover" @click="previewReport">
    <div class="report-header">
      <div class="report-title">{{ report.name }}</div>
      <el-tag :type="report.pass_rate === 100 ? 'success' : 'danger'">
        {{ report.pass_rate === 100 ? '执行成功' : '有失败用例' }}
      </el-tag>
    </div>
    <div class="report-meta">
      <span>执行时间：{{ formatTime(report.create_time) }}</span>
      <span>用例总数：{{ report.total_cases }}</span>
      <span>通过率：{{ report.pass_rate }}%</span>
    </div>
    <div class="report-stats">
      <div class="stat-item success">
        <div class="stat-label">成功</div>
        <div class="stat-value">{{ report.success_cases }}</div>
      </div>
      <div class="stat-item danger">
        <div class="stat-label">失败</div>
        <div class="stat-value">{{ report.fail_cases }}</div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { formatTime } from '@/utils/format'

const router = useRouter()
const props = defineProps({
  report: {
    type: Object,
    required: true
  }
})

// 预览报告
const previewReport = () => {
  router.push(`/report-center?reportId=${props.report.id}`)
}
</script>

<style scoped lang="scss">
.report-card {
  cursor: pointer;
  transition: all 0.3s;
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }
  .report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    .report-title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }
  }
  .report-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #666;
  }
  .report-stats {
    display: flex;
    justify-content: space-between;
    .stat-item {
      text-align: center;
      flex: 1;
      .stat-label {
        font-size: 12px;
        color: #909399;
        margin-bottom: 5px;
      }
      .stat-value {
        font-size: 18px;
        font-weight: 500;
        color: #333;
      }
      &.success .stat-value {
        color: #67c23a;
      }
      &.danger .stat-value {
        color: #f56c6c;
      }
    }
  }
}
</style>